

<script setup xmlns="http://www.w3.org/1999/html">
import { ref, onMounted } from 'vue';
import ArticleList from '@/components/ArticleList.vue'; 
import axios from 'axios';

const loadedArticles = ref([]);

onMounted(async () => {
  try {
    const response = await axios.get('/api/articles'); 
    loadedArticles.value = response.data;
  } catch (error) {
    console.error('Failed to fetch articles:', error);
  }
});
</script>

<template>
    <div class="container">

      <hr class="divider" />
      <main>
        <h1 class="page-title">文章列表页面</h1>
        <nav class="navbar">
        <el-link href="/login"  class="login-link">
          <svg style="height: 30;width: 30; color: #CDCDCD;" t="1719987254686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4551" width="128" height="128"><path d="M620.423529 1017.976471H403.576471c-198.776471 0-355.388235 0-355.388236-96.376471V903.529412c0-186.729412 156.611765-343.341176 355.388236-343.341177h216.847058c198.776471 0 355.388235 156.611765 355.388236 343.341177v18.070588c0 96.376471-168.658824 96.376471-355.388236 96.376471zM234.917647 283.105882C234.917647 132.517647 361.411765 6.023529 512 6.023529c150.588235 0 277.082353 126.494118 277.082353 277.082353 0 150.588235-126.494118 277.082353-277.082353 277.082353-150.588235 0-277.082353-126.494118-277.082353-277.082353z" fill="#cdcdcd" p-id="4552"></path></svg>&nbsp;点击登录<p style="color: red"></p></el-link>

      </nav>
        <ArticleList />
      </main>
    </div>
</template>


<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 2rem;
  justify-content: center; /* 垂直居中 */
  align-items: center; /* 水平居中 */
}

.navbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 1rem;
}

.login-link {
  margin-right: 1em;
  color: #333;
}

.divider {
  margin: 1em 0;
  border: none;
  border-top: 1px solid #ccc;
}

.page-title {
  text-align: center;
  margin-bottom: 2rem;
}
</style>



